<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html
>
<head>
<%--    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>--%>
    <meta charset="UTF-8">
<%--    <meta http-equiv="X-UA-Compatible" content="IE=edge">--%>
<%--    <meta http-equiv="X-UA-Compatible" content="IE=edge">--%>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/index.css">
    <script src="../../js/jquery.min.js" charset="UTF-8"></script>
    <script src="../../js/index.js" charset="UTF-8"></script>
    <link rel="stylesheet" href="../css/A.css" />
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <script src="../../layui/layui.js"></script>
<%--    <script src="../../js/modalBox.js"></script>--%>
    <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <style>
        a {
            color: black;
            font-size: 15px;
        }
        a:hover {
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            background-color: #03e9f4;
            box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
        }
    </style>

</head>
<body>


<ul class="layui-nav">
    <li class="layui-nav-item">
        <a href="${pageContext.request.contextPath}/book/first">主页<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item">
        <a href="${pageContext.request.contextPath}/shopCar">我的购物车<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item">
        <a href="${pageContext.request.contextPath}/userAllOrder">我的订单<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item" lay-unselect="">
        <a href="javascript:;"><img src="//t.cn/RCzsdCq" class="layui-nav-img">个人中心</a>
        <dl class="layui-nav-child">
            <dd><a href="${pageContext.request.contextPath}/toUpdateUserInfor">修改信息</a></dd>
            <dd><a href="${pageContext.request.contextPath}/toUpdataPassword">修改密码</a></dd>
            <dd><a href="${pageContext.request.contextPath}/logout">注销</a></dd>
        </dl>
    </li>
</ul>
<div class="car" style=" border:1px solid #96c2f1;background:#eff7ff;width: 900px">

    <table cellspacing="0">
        <thead>
        <tr style="background: #bce8f1">
            <th><input type="checkbox" name="" id=""  class="all-first"><span>全选</span></th>
            <th>商品</th>
            <th>名称</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
            <th>确认</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <c:forEach var="shopCar" items="${userCars}">
            <tr>

<%--                double x=${shopCar.num},y=${shopCar.price},z=x*y;--%>
                <td><input type="checkbox" name="" id=""  class="all" ></td>
                <td><a id="triggerBtn"><img src=${shopCar.url} lt=""></a></td>
                <td><span>${shopCar.bookName}</span></td>
                <td id="x1" class="single">&yen;${shopCar.price}</td>
                <td class="num">
                    <ul>
                        <li class="sub" num="1"><a href="${pageContext.request.contextPath}/subNum?bookId=${shopCar.bookId}" >-</a></li>
                        <li class="input"><input type="text" name="" id="x2" value="${shopCar.num}"></li>
                        <li class="sum" num="1"><a href="${pageContext.request.contextPath}/addNum?bookId=${shopCar.bookId}" >+</a></li>
                    </ul>
                </td>
                <td id="x3" class="press">&yen;${shopCar.sumFee()}</td>
<%--                <td class="del"><a href="javascript:;"></a></td>--%>
                <td class="del"><a href="${pageContext.request.contextPath}/deleteShopCar?bookId=${shopCar.bookId}" >删除</a></td>
                <td class="del"><a href="${pageContext.request.contextPath}/bookCheck?bookId=${shopCar.bookId}" >确定</a></td>
                <td></td>
            </tr>
        </c:forEach>
        </tbody>

    </table>
    <!-- 最后一行-->
    <div class="last">
        <ul>
            <li><input type="checkbox" name="" id=""  class="all-first"><span>全选</span></li>
<%--            <li class="foot-del"><a href="javascript:;">删除选中的商品</a></li>--%>
            <li class="del-all"><a href="${pageContext.request.contextPath}/deleteAll">清理购物车</a></li>
            <li><a href="${pageContext.request.contextPath}/order">去结算</a></li>
            <li>总价：<span class="mon">&yen0.00</span></li>
            <li>已经选<b>1</b>个商品</li>
        </ul>
    </div>
</div>

<script type="text/javascript" src="../../js/modalBox.js"></script>
</body>
</div>

<script>
    // function fun() {
    //
    //     alert("click success!");
    //
    // }

    //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;

        //
    });
</script>
</body>
</html>
